<template>
	<view class="content">
		<image src="../../static/image/topBg.png" class="topBg" mode=""></image>
		<view class="conBox">
			<view class="main-title">寄快递</view>
			<view class="sendingBox">
				<image src="../../static/image/one.png" v-if="current==1" class="jkdBg" mode=""></image>
				<image src="../../static/image/two.png" v-if="current==2" class="jkdBg" mode=""></image>
				<image src="../../static/image/three.png" v-if="current==3" class="jkdBg" mode=""></image>
				<view class="jkdBox">
				<view class="sendNav">
					<view :class="current==1?'sendItem':'sendItems sendItem'" @click="current=1">
						寄快递
						<image v-if="current==1" src="../../static/image/sendIcon.png" class="sendIcon" mode=""></image>
					</view>
					<view :class="current==2?'sendItem':'sendItems sendItem'" @click="current=2">
						同城寄
						<image v-if="current==2" src="../../static/image/sendIcon.png" class="sendIcon" mode=""></image>
					</view>
					<view :class="current==3?'sendItem':'sendItems sendItem'" @click="current=3">
						海外寄
						<image v-if="current==3" src="../../static/image/sendIcon.png" class="sendIcon" mode=""></image>
					</view>
				</view>
				<view class="sendBox">
					<view class="sending" @click="goInfo('/pages-send/sending/sending')">
						<view class="left">请填写寄件人信息 ></view>
						<view class="right">去寄件</view>
					</view>
					<view class="company">
						支持多家快递公司
						<image v-for="(item,index) in KDcompany" :src="imgUrl+item.icon" class="icon" mode=""></image>
						<!-- <image src="../../static/image/zt.png" class="icon" mode=""></image>
						<image src="../../static/image/jd.png" class="icon" mode=""></image>
						<image src="../../static/image/db.png" class="icon" mode=""></image>
						<image src="../../static/image/yd.png" class="icon" mode=""></image>
						<image src="../../static/image/jt.png" class="icon" mode=""></image> -->
					</view>
				</view>
				</view>
			</view>
			<view class="notice" @click="newList[0]?goInfo(`/pages-send/orderInfo/orderInfo?id=${newList[0].order_id}`):''">
				<view class="left">
					<image src="../../static/image/notice.png" class="icon" mode=""></image>
					<view class="title">消息通知</view>
					<view class="text" v-if="newList[0]">{{newList[0].content}}</view>
					<view class="text" v-else>暂无消息</view>
				</view>
				<image src="../../static/image/go-right.png" class="right" mode=""></image>
			</view>
			<image :src="imgUrl+SendingZK.img" @click="goInfo('SendingZK')" class="preferential" mode=""></image>
			<view class="nav">
				<view class="nav-left" @click="goInfo('MovieTickets')">
					<image :src="imgUrl+MovieTickets.img" class="movieTickets" mode=""></image>
					<!-- <view class="movieBox">
						<view class="text">Movie ticket</view>
						<view class="title">电影票</view>
						<view class="tips">价格媲美各大电影平台</view>
						<image src="../../static/image/goMovie.png" class="goMovie" mode=""></image>
					</view> -->
				</view>
				<view class="nav-right">
					<view class="nav-right-top" @click="goInfo('PhoneBill')">
						<image :src="imgUrl+PhoneBill.img" class="charge" mode=""></image>
						<!-- <view class="chargeBox">
							<view class="text-left">
								<view class="text">Equity</view>
								<view class="title">权益</view>
							</view>
							<image src="../../static/image/goCharge.png" class="goCharge" mode=""></image>
						</view> -->
					</view>
					<view class="nav-right-bottom">
						<view class="nav-right-bottom-left" @click="goInfo('TakingTaxi')">
							<image :src="imgUrl+TakingTaxi.img" class="car" mode=""></image>
							<!-- <view class="carBox">
								<view class="text">Take a taxi</view>
								<view class="title">
									打车
									<image src="../../static/image/goCar.png" class="goCar" mode=""></image>
								</view>
							</view> -->
						</view>
						<view class="nav-right-bottom-right" @click="goInfo('/pages/service/service')">
							<view class="text">More services</view>
							<view class="title">更多</view>
							<view class="title">
								服务
								<image src="../../static/image/goCar.png" class="goCar" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tool" style="margin-bottom: 300rpx;">
				<view class="title">
					<view class="text">常用工具</view>
					<image src="../../static/image/tool.png" class="tool-line" mode=""></image>
				</view>
				<view class="toolBox">
					<view v-for="(item,index) in commonTools" style="width: 25%;">
						<view class="toolItem" v-if="item.type=='link'" @click="goInfos(item)">
							<image :src="imgUrl+item.icon" class="icon" mode=""></image>
							<view class="name">{{item.name}}</view>
						</view>
					</view>
					
					<!-- <view class="toolItem" @click="goInfo('/pages-send/unpaidList/unpaidList')">
						<image src="../../static/image/payment.png" class="icon" mode=""></image>
						<view class="name">费用补缴</view>
					</view>
					<view class="toolItem" @click="goInfo()">
						<image src="../../static/image/cost.png" class="icon" mode=""></image>
						<view class="name">费用查询</view>
					</view>
					<view class="toolItem" @click="goInfo('/pages-send/helpCenter/helpCenter')">
						<image src="../../static/image/help.png" class="icon" mode=""></image>
						<view class="name">帮助中心</view>
					</view> -->
				</view>
			</view>
		</view>
		<image src="../../static/image/kefu.png" @click="goInfo('/pages-send/kefu/kefu')" class="kefu" mode=""></image>
		
		<u-popup v-model="payShow" mode="center" :mask-close-able="false" :custom-style="{background:'rgba(0,0,0,0)'}">
			<view class="phoneBox" v-if="list.length!=0">
				<image src="../../static/image/phoneBg.png" class="phoneBg" mode=""></image>
				<view class="boxs">
					<view class="titles">消息提醒</view>
					<view class="line"></view>
					<view class="sub-title">您的订单 <text style="color: #000;font-weight: 600;" v-if="list.length!=0">{{list[0].order_no}}</text></view>
					<view class="sub-titles">待补缴费用</view>
					<view class="btn" @click="goInfo('/pages-send/unpaidList/unpaidList')">去查看</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 导航栏 -->
		<tabbar link="/pages/index/index"></tabbar>
	</view>
</template>

<script>
	import tabbar from '../../components/tabbar/tabbar.vue'
	import {wxouthlogin,paymentUnpaid,getSettingInfo,noticeList} from "../../common/api.js"
	import request from '../../common/common.js'
	export default {
		components:{tabbar},
		data() {
			return {
				imgUrl:request.imgUrl,
				current:1,
				list:[],
				newList:[],
				payShow:false,
				
				MovieTickets:{},
				PhoneBill:{},
				TakingTaxi:{},
				SendingZK:{},
				commonTools:[],
				KDcompany:[]
			}
		},
		onLoad(options) {
			console.log(options)
			let that = this
			if(options){
				//获取URL
				let url = location.href;
				//声明参数字典
				let requestDic = {};
				//确定URL中包含 ？ 
				if (url.indexOf("?") !== -1){
				    //返回 ？ 后面的字符串
				    let str = url.substr(url.indexOf("?") + 1);
				    //通过 & 符号分割字符串，获取参数数组
				    let strArray = str.split("&");
					console.log(strArray);
					let code=strArray[0].split("=")
					console.log(code)
				    //遍历参数数组
				    for (let i = 0; i < strArray.length; i++){
				        //把遍历到的每一个元素再以 = 分割，分割后第0为作为key，第一位作为value 存放到字典中
				        requestDic[strArray[i].split("=")[0]] = decodeURI(strArray[i].split("=")[1]);
				    }
				}
				//获取到的参数
				console.log('code',requestDic);
				that.getToken(requestDic.code)
				
			}
			
		},
		onShow() {
			
		},
		methods: {
			getToken(code){
				let that = this
				wxouthlogin({
					code
				}).then(res=>{
					console.log(res)
					if(res.code==10000){
						uni.setStorageSync("token",res.data.token)
						that.getTo()
						that.getSetInfo()
						that.getNewList()
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			getNewList(){
				noticeList({}).then(res=>{
					console.log(res)
					if(res.code==10000){
						this.newList=res.data.list
					}
				})
			},
			getSetInfo(){
				getSettingInfo('MovieTickets,PhoneBill,TakingTaxi,commonTools,KDcompany,SendingZK',{}).then(res=>{
					if(res.code==10000){
						this.MovieTickets=JSON.parse(res.data.MovieTickets)
						this.PhoneBill=JSON.parse(res.data.PhoneBill)
						this.TakingTaxi=JSON.parse(res.data.TakingTaxi)
						this.commonTools=JSON.parse(res.data.commonTools)
						this.KDcompany=JSON.parse(res.data.KDcompany)
						this.SendingZK=JSON.parse(res.data.SendingZK)
					}
				})
			},
			getTo(){
				paymentUnpaid({}).then((res=>{
					if(res.code==10000){
						this.list=res.data.list
						if(this.list.length!=0){
							this.payShow=true
						}
					}
				}))
			},
			goInfo(url){
				if(!url){
					uni.showToast({
						title: '开发中...',
						duration: 2000,
						icon:"none"
					});
					return
				}
				if(url=='SendingZK'){
					if(this.SendingZK.type=='link'){
						uni.navigateTo({
							url:this.SendingZK.url
						})
						return
					}else if(this.SendingZK.type=='url'){
						window.location.href=this.SendingZK.url
					}else if(this.SendingZK.type=='mini'){
						console.log('小程序')
					}
				}
				if(url=='MovieTickets'){
					if(this.MovieTickets.type=='link'){
						uni.navigateTo({
							url:this.MovieTickets.url
						})
						return
					}else if(this.MovieTickets.type=='url'){
						window.location.href=this.MovieTickets.url
					}else if(this.MovieTickets.type=='mini'){
						console.log('小程序')
					}
				}
				if(url=='PhoneBill'){
					if(this.PhoneBill.type=='link'){
						uni.navigateTo({
							url:this.PhoneBill.url
						})
						return
					}else if(this.PhoneBill.type=='url'){
						window.location.href=this.PhoneBill.url
					}else if(this.PhoneBill.type=='mini'){
						console.log('小程序')
					}
				}
				if(url=='TakingTaxi'){
					if(this.TakingTaxi.type=='link'){
						uni.navigateTo({
							url:this.TakingTaxi.url
						})
						return
					}else if(this.TakingTaxi.type=='url'){
						window.location.href=this.TakingTaxi.url
					}else if(this.TakingTaxi.type=='mini'){
						console.log('小程序')
					}
				}
				if(url=='/pages/notice/notice'||url=='/pages/service/service'){
					uni.reLaunch({
						url:url
					});
				}else{
					uni.navigateTo({
						url:url
					})
				}
			},
			goInfos(item){
				
				if(item.type=='link'){
					if(!item.url){
						uni.showToast({
							title: '开发中...',
							duration: 2000,
							icon:"none"
						});
						return
					}
					uni.navigateTo({
						url:item.url
					})
					return
				}else if(item.type=='url'){
					if(!item.url){
						uni.showToast({
							title: '开发中...',
							duration: 2000,
							icon:"none"
						});
						return
					}
					window.location.href=item.url
				}else if(item.type=='mini'){
					console.log('小程序')
				}
			}
		}
	}
</script>
<style>
	page{
		background: #F5F6FA;
	}
</style>
<style lang="scss" scoped>
.content{
	width: 750rpx;
	position: relative;
	.phoneBox{
		width: 539rpx;
		height: 634rpx;
		.phoneBg{
			width: 100%;
			height: 100%;
		}
		.boxs{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			padding: 0 40rpx;
			box-sizing: border-box;
			.titles{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				margin-top: 143rpx;
			}
			.line{
				width: 71rpx;
				height: 9rpx;
				background: #1AA261;
				border-radius: 9rpx;
				margin-top: 32rpx;
			}
			.sub-title,.sub-titles,.phone{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 58rpx;
				text-align: center;
				font-style: normal;
			}
			.sub-title{
				margin-top: 51rpx;
			}
			.sub-titles{
				margin-top: 2rpx;
			}
			.phone{
				color: #333;
				font-weight: 600;
			}
			.btn{
				width: 100%;
				height: 88rpx;
				background: #1AA261;
				border-radius: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				font-style: normal;
				margin-top: 89rpx;
			}
		}
	}
	.kefu{
		width: 156rpx;
		height: 156rpx;
		position: fixed;
		bottom: 250rpx;
		right:30rpx;
	}
	.topBg{
		width: 100%;
		height: 1163rpx;
	}
	.conBox{
		width: 750rpx;
		padding: 24rpx;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		.main-title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 36rpx;
			text-align: center;
			font-style: normal;
		}
		.sendingBox{
			width: 100%;
			height: 368rpx;
			// background: #D9F3E6;
			// background: linear-gradient( 180deg, #F2FFF9 0%, #FFFFFF 100%);
			// border: 2rpx solid #FFFFFF;
			margin-top: 245rpx;
			border-radius: 50rpx;
			position: relative;
			.jkdBg{
				width: 100%;
				height: 368rpx;
				position: absolute;
				top: -34rpx;
			}
			// position: absolute;
			// top: 245rpx;
			// z-index: 1;
			.jkdBox{
				width: 100%;
				height: 368rpx;
				position: absolute;
				top: -34rpx;
				.sendNav{
					// padding: 40rpx;
					// box-sizing: border-box;
					margin-top: 34rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					.sendItem{
						// width: 33.33%;
						height: 90rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 34rpx;
						color: #333333;
						line-height: 34rpx;
						text-align: center;
						font-style: normal;
						.sendIcon{
							margin-left: 8rpx;
							width: 24rpx;
							height: 17rpx;
						}
					}
					.sendItems{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #034B2D;
						line-height: 28rpx;
						text-align: center;
						font-style: normal;
					}
				}
				
				.sendBox{
					width: 100%;
					height: 278rpx;
					// background: #fff;
					// border: 2rpx solid #FFFFFF;
					border-radius: 0 20rpx 20rpx 20rpx;
					padding: 40rpx;
					box-sizing: border-box;
					overflow: hidden;
					.sending{
						width: 100%;
						height: 104rpx;
						background: #FFFAF7;
						border-radius: 20rpx;
						border: 2rpx solid #E7BB69;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 30rpx 0 40rpx;
						box-sizing: border-box;
						.left{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
						}
						.right{
							width: 142rpx;
							height: 60rpx;
							background: #F1AC3D;
							border-radius: 30rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #FFFFFF;
							line-height: 28rpx;
							text-align: center;
							font-style: normal;
							line-height: 60rpx;
						}
					}
					.company{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #333333;
						line-height: 24rpx;
						text-align: left;
						font-style: normal;
						margin-top: 34rpx;
						display: flex;
						align-items: center;
						.icon{
							width: 32rpx;
							height: 32rpx;
							margin-left: 19rpx;
						}
					}
				}
			}
			
			
		}
		.notice{
			width: 100%;
			height: 80rpx;
			background: #FAFAFA;
			border-radius: 20rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 34rpx;
			box-sizing: border-box;
			.left{
				display: flex;
				align-items: center;
				.icon{
					width: 16rpx;
					height: 17rpx;
					margin-right: 10rpx;
				}
				.title{
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 22rpx;
					color: #333333;
					line-height: 24rpx;
					font-style: normal;
					margin-right: 20rpx;
				}
				.text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
					line-height: 24rpx;
					font-style: normal;
				}
			}
			.right{
				width: 20rpx;
				height: 12rpx;
			}
		}
		.preferential{
			width: 100%;
			height: 272rpx;
		}
		.nav{
			display: flex;
			justify-content: space-between;
			// align-items: center;
			.nav-right{
				.nav-right-top{
					width: 340rpx;
					height: 106rpx;
					position: relative;
					.charge{
						width: 340rpx;
						height: 106rpx;
					}
					.chargeBox{
						width: 340rpx;
						height: 106rpx;
						padding: 24rpx;
						box-sizing: border-box;
						position: absolute;
						top: 0;
						left: 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.text-left{
							.text{
								font-family: STSongti-SC, STSongti-SC;
								font-weight: 400;
								font-size: 18rpx;
								color: #FFFFFF;
								line-height: 24rpx;
								text-align: justify;
								font-style: normal;
							}
							.title{
								font-family: STSongti-SC, STSongti-SC;
								font-weight: 900;
								font-size: 32rpx;
								color: #FFFFFF;
								line-height: 32rpx;
								text-align: left;
								font-style: normal;
							}
						}
						.goCharge{
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
				.nav-right-bottom{
					margin-top: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.nav-right-bottom-right{
						width: 160rpx;
						height: 150rpx;
						padding: 24rpx;
						box-sizing: border-box;
						background: #FFFFFF;
						border-radius: 20rpx;
						.text{
							font-family: STSongti-SC, STSongti-SC;
							font-weight: 400;
							font-size: 18rpx;
							color: #AAAAAA;
							line-height: 18rpx;
							text-align: justify;
							font-style: normal;
						}
						.title{
							margin-top: 8rpx;
							font-family: STSongti-SC, STSongti-SC;
							font-weight: 900;
							font-size: 32rpx;
							color: #1AA261;
							line-height: 32rpx;
							text-align: left;
							font-style: normal;
							display: flex;
							flex-wrap: nowrap;
							align-items: center;
							.goCar{
								width: 10rpx;
								height: 12rpx;
								margin-left: 10rpx;
							}
						}
					}
					.nav-right-bottom-left{
						width: 160rpx;
						height: 150rpx;
						position: relative;
						.car{
							width: 160rpx;
							height: 150rpx;
						}
						.carBox{
							width: 160rpx;
							height: 150rpx;
							padding: 24rpx;
							box-sizing: border-box;
							position: absolute;
							top: 0;
							left: 0;
							.text{
								font-family: STSongti-SC, STSongti-SC;
								font-weight: 400;
								font-size: 18rpx;
								color: #AAAAAA;
								line-height: 18rpx;
								text-align: justify;
								font-style: normal;
								margin-top: 60rpx;
							}
							.title{
								font-family: STSongti-SC, STSongti-SC;
								font-weight: 900;
								font-size: 32rpx;
								color: #1AA261;
								line-height: 32rpx;
								text-align: left;
								font-style: normal;
								display: flex;
								flex-wrap: nowrap;
								align-items: center;
								.goCar{
									width: 10rpx;
									height: 12rpx;
									margin-left: 10rpx;
								}
							}
						}
					}
				}
			}
			.nav-left{
				position: relative;
				width: 340rpx;
				height: 272rpx;
				.movieTickets{
					width: 340rpx;
					height: 272rpx;
				}
				.movieBox{
					width: 340rpx;
					height: 272rpx;
					padding: 32rpx;
					box-sizing: border-box;
					position: absolute;
					top: 0;
					left: 0;
					.text{
						font-family: STSongti-SC, STSongti-SC;
						font-weight: 400;
						font-size: 18rpx;
						color: #FFFFFF;
						line-height: 24rpx;
						text-align: justify;
						font-style: normal;
					}
					.title{
						font-family: STSongti-SC, STSongti-SC;
						font-weight: 900;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
					}
					.tips{
						width: 276rpx;
						height: 50rpx;
						background: rgba(255,255,255,0.14);
						border-radius: 8rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #CDF3E1;
						line-height: 50rpx;
						text-align: center;
						font-style: normal;
						margin-top: 18rpx;
					}
					.goMovie{
						width: 40rpx;
						height: 40rpx;
						margin-top: 40rpx;
					}
				}
			}
		}
		.tool{
			width: 100%;
			// height: 315rpx;
			background: #FFFFFF;
			border-radius: 8rpx 20rpx 20rpx 8rpx;
			padding: 35rpx 40rpx;
			box-sizing: border-box;
			margin-top: 32rpx;
			.toolBox{
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 98rpx;
				.toolItem{
					width: 100%;
					.icon{
						width: 52rpx;
						height: 52rpx;
						margin-left: 50%;
						transform: translateX(-50%);
					}
					.name{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 24rpx;
						text-align: center;
						font-style: normal;
					}
				}
			}
			.title{
				width: 145rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				line-height: 30rpx;
				text-align: left;
				font-style: normal;
				position: relative;
				.text{
					position: absolute;
					z-index: 9;
				}
				.tool-line{
					width: 63rpx;
					height: 53rpx;
					margin-left: -50rpx;
					position: absolute;
					z-index: 1;
					right: 0;
					top: -10rpx;
					// top: 50%;
					// transform: translateY(-50%);
				}
			}
		}
	}
}
</style>
